<template>
  <div id="app">
    <div>
      <!-- include 希望缓存的组件   -->
      <!-- exclude 不希望被缓存的组件 -->
      <!-- exclude 优先级高于 include -->
      <keep-alive
        include="AboutIndex"
        max="1"
        :exclude="isKeepalive ? '' : 'AboutIndex'"
      >
        <router-view />
      </keep-alive>
    </div>
  </div>
</template>

<script>
export default {
 name:"App",
 data()
 {
    return{
      isShow:true,
      isKeepalive:false
    } 
 },
 watch:{
  //监听路由 判断是否进行keep-alive动态缓存
  $route:function(to,from)
  {
    if(to.name === 'detail'||to.name === "about")
    {
      this.isKeepalive = true
    }else
    {
      this.isKeepalive = true
    }
  }
 }
}
</script>

<style>

</style>